<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆违章查询</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div id="app">
        <div id="form">
            <input type="text" v-model="carno" @keydown.enter="search()" placeholder="请输入车牌号或车主姓名">
            <input type="button" value="查询" @click="search()">
        </div>
        <hr>
        <div class="data" v-if="searched">
            <table>
                <tr>
                    <th>车牌</th>
                    <th>车主</th>
                    <th>时间</th>
                    <th>地点</th>
                    <th>违章原因</th>
                    <th>触发方式</th>
                    <th>是否受理</th>
                    <th>操作</th>
                </tr>
                <tr v-for="record in records">
                    <td>{{ record.car.carno }}</td>
                    <td>{{ record.car.owner }}</td>
                    <td>{{ record.time }}</td>
                    <td>{{ record.place }}</td>
                    <td>{{ record.reason }}</td>
                    <td>{{ record.punish }}</td>
                    <td>{{ record.dealed | yesno }}</td>
                    <td class="handler">
                        <a v-if="!record.dealed" href="" @click.prevent="handle(record)">受理</a>
                    </td>
                </tr>
            </table>
            <div class="paginator">
                <button @click="prevPage()" :disabled="current_page <= 1">上一页</button>&nbsp;&nbsp;
                第{{ current_page }}页 / 共{{ total_page }}页&nbsp;&nbsp;
                <button @click="nextPage()" :disabled="current_page >= total_page">下一页</button>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
    let app = new Vue({
        el: '#app',
        data: {
            searched: false,
            records: [],
            current_page: 1,
            total_page: 0,
            carno: ''
        },
        filters: {
            yesno(value) {
                return value ? '已受理' : '未受理'
            }
        },
        methods: {
            search() {
                let url = '/search/?carno=' + this.carno +
                    '&page=' + this.current_page
                fetch(url)
                    .then(resp => resp.json())
                    .then(json => {
                        this.searched = json.searched
                        this.records = json.records
                        this.current_page = json.current_page
                        this.total_page = json.total_page
                    })
            },
            prevPage() {
                if (this.current_page > 1) {
                    this.current_page -= 1
                    this.search()
                }
            },
            nextPage() {
                if (this.current_page < this.total_page) {
                    this.current_page += 1
                    this.search()
                }
            },
            handle(record) {
                fetch('/handle/?rno=' + record.no)
                    .then(resp => resp.json())
                    .then(json => {
                        if (json.code == 100) {
                            record.dealed = true
                        }
                    })
            }
        }
    })
    </script>
</body>
</html>